<template>
  <DefaultLayout>
    <n-flex class="w-100% m-auto" justify="center">
      <!-- 头部标题 -->
      <n-flex class="w-100%" justify="center" style="background-color: #fff">
        <n-flex class="mt-20 w-50% h-150 min-w-500" vertical>
          <n-flex justify="space-between">
            <n-flex>
              <n-avatar :size="80" :src="company.company_icon" />
              <n-flex vertical justify="space-around">
                <n-flex align="center">
                  <h1>{{ company.company_name }}</h1>
                  <n-tag :bordered="false" :type="state?.type">{{ state?.label }}</n-tag>
                  <n-button
                    round
                    :type="hasFollowed ? 'default' : 'primary'"
                    class="mt-5"
                    size="small"
                    @click="handleFollowCompany"
                  >
                    {{ hasFollowed ? '已关注' : '关注' }}
                  </n-button>
                </n-flex>
                <n-flex>
                  <span>{{ getIndustriesName(company.industry_code) }}</span>
                  ·
                  <span>{{ getCompanySize(company.size) }}</span>
                  ·
                  <span>{{ getCity(company.address_code) }}</span>
                </n-flex>
              </n-flex>
            </n-flex>
            <n-flex align="center"></n-flex>
          </n-flex>

          <n-flex class="mt-12">
            <n-tag round :bordered="false" v-for="item in company.company_tags">{{ item }}</n-tag>
          </n-flex>
        </n-flex>
      </n-flex>
      <!-- 主体部分 -->
      <n-flex class="w-1015">
        <div class="mt-12" v-show="detailPage">
          <n-card title="热招职位" style="border-radius: 10px" :bordered="false">
            <template #header-extra>
              <n-button text type="primary" @click="switchPage">查看更多></n-button>
            </template>
            <n-flex justify="space-between">
              <n-card v-for="item in job_3" class="w-32%" style="border-radius: 10px">
                <a :href="'/job/' + item.job_id" target="_blank">
                  <n-flex class="mt-5 text-18 color-primary">
                    <n-ellipsis style="max-width: 60%">
                      {{ item.title }}
                    </n-ellipsis>
                    <n-text class="ml-auto color-#ff6400">
                      {{ item.salary_min }}-{{ item.salary_max }}K
                    </n-text>
                  </n-flex>
                  <n-flex class="mt-5 text-12 color-#999">
                    <n-text style="color: #999">
                      {{ getCity(item.address_code) }}
                    </n-text>
                    |
                    <n-text style="color: #999">
                      {{ getJobName(item.job_code) }}
                    </n-text>
                  </n-flex>
                  <n-flex class="mt-5">
                    <n-tag
                      v-for="t in item.job_tags"
                      size="small"
                      :bordered="false"
                      :color="{ color: '#f8f8f8', textColor: '#8d92a1', borderColor: '#fff' }"
                    >
                      {{ t }}
                    </n-tag>
                  </n-flex>
                </a>
              </n-card>
            </n-flex>
          </n-card>
          <n-flex class="mt-12" justify="space-between">
            <div class="w-650">
              <n-card title="公司简介" style="border-radius: 10px" :bordered="false">
                <div>
                  <p v-for="item in companyDescs" class="mt-12">
                    {{ item }}
                  </p>
                </div>
              </n-card>
            </div>
            <div class="w-350">
              <n-card title="公司福利" style="border-radius: 10px" :bordered="false">
                <n-flex vertical>
                  <div v-for="item in company.benefit_tags">
                    <n-tag round :bordered="false">{{ item }}</n-tag>
                  </div>
                </n-flex>
              </n-card>
            </div>
          </n-flex>
        </div>
        <div class="mt-12" v-show="!detailPage">
          <n-card style="border-radius: 10px" :bordered="false">
            <n-button text type="primary" @click="switchPage" class="text-16 mr-auto">
              &lt;返回
            </n-button>
          </n-card>
          <div class="font-600 text-32 flex justify-center mt-12">招聘列表</div>

          <n-flex justify="space-between" :size="[10, 20]" class="w-1015 mt-12">
            <n-card
              v-for="item in jobs"
              class="w-32%"
              style="border-radius: 10px"
              :bordered="false"
            >
              <a :href="'/job/' + item.job_id" target="_blank">
                <n-flex class="mt-5 text-18 color-primary">
                  <n-ellipsis style="max-width: 60%">
                    {{ item.title }}
                  </n-ellipsis>
                  <n-text class="ml-auto color-#ff6400">
                    {{ item.salary_min }}-{{ item.salary_max }}K
                  </n-text>
                </n-flex>
                <n-flex class="mt-5 text-12 color-#999">
                  <n-text style="color: #999">
                    {{ getCity(item.address_code) }}
                  </n-text>
                  |
                  <n-text style="color: #999">
                    {{ getJobName(item.job_code) }}
                  </n-text>
                </n-flex>
                <n-flex class="mt-5">
                  <n-tag
                    v-for="t in item.job_tags"
                    size="small"
                    :bordered="false"
                    :color="{ color: '#f8f8f8', textColor: '#8d92a1', borderColor: '#fff' }"
                  >
                    {{ t }}
                  </n-tag>
                </n-flex>
              </a>
            </n-card>
          </n-flex>
        </div>
      </n-flex>
    </n-flex>
  </DefaultLayout>
</template>

<script setup>
import DefaultLayout from '@/layouts/default/index.vue'
import seekerApi from '@/api/seeker'
import { getCity, getJobName, getCompanySize, getIndustriesName } from '@/data'
import { useSeekerStore } from '@/store'
const seekerStore = useSeekerStore()

const props = defineProps({
  company_id: undefined,
})

let companyDescs = computed(() => {
  return company.value.description?.split(/[\r\n]+/)
})

const stateList = [
  { value: 0, type: 'error', label: '未认证' },
  { value: 1, type: 'success', label: '已认证' },
]
let state = computed(() => {
  return stateList[company.value.state]
})

let job_3 = computed(() => {
  return jobs.value.slice(0, 3)
})
const jobs = ref([])
const company = ref({})

const hasFollowed = ref(false)

async function handleFollowCompany() {
  if(!hasFollowed.value) {
    const {data} = await seekerApi.followCompany(seekerStore.seeker.seeker_id, company.value.company_id)
    if(data) {
      $message.success('关注企业成功')
      hasFollowed.value = true
    }
  }
  else {
    const {data} = await seekerApi.cancelFollowing(seekerStore.seeker.seeker_id, company.value.company_id)
    if(data) {
      $message.success('取消关注企业成功')
      hasFollowed.value = false
    }
  }
}

const detailPage = ref(true)
function switchPage() {
  detailPage.value = !detailPage.value
}

onMounted(async () => {
  //获取企业信息及全部职位
  const { data } = await seekerApi.getCompanyDetail(props.company_id, -1)
  let value = data
  jobs.value = value.jobs
  company.value = value.company

  // 是否已关注该企业
  let res = await seekerApi.hasFollowedCompany(seekerStore.seeker.seeker_id, company.value.company_id)
  hasFollowed.value = res.data
})
</script>
